<template>
    <div ref="MapView" class="MapView">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            显示隐藏： <i-switch v-model="show" size="large"></i-switch>
            <br><br>
            --------------------------------------------------
            <br>
            航向角： <Slider v-model="heading" :min="0" :max="360"></Slider>
            俯仰角：<Slider v-model="pitch" :min="-90" :max="90"></Slider>
            翻滚角：<Slider v-model="roll" :min="0" :max="360"></Slider>
            --------------------------------------------------
            <br><br>
            展开角度：<Slider v-model="angle" :min="0" :max="90"></Slider>
            <br>
            面颜色：
            <ColorPicker v-model="Color" alpha />&nbsp;
            <br>
            <br>
            <Button @click="getCoverage">获取覆盖区</Button>
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

var position = Cesium.Cartesian3.fromDegrees(119, 40, 1500000);
var _Entity = null;

export default {
    data() {
        return {
            SenceMode: '3D',
            heading: 0,
            pitch: 0,
            roll: 0,
            angle: 20,
            show: true,
            Color: 'rgba(100,0,255,0.4)',
        }
    },
    watch: {
        SenceMode(value) { map.SenceMode = value; },
        heading() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            // modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, r, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(position, r);
        },
        pitch() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            // modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, r, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(position, r);
        },
        roll() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            // modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, r, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(position, r);
        },
        angle(value) {
            _Entity.comsatScan.angle = value
        },
        show(value) {
            _Entity.comsatScan.show = value
        },
        Color(value) {
            _Entity.comsatScan.color = this.rgba2Color(value);
        },
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, { mapOptions: { senceMode: this.SenceMode } });
        map.addProviders(mapConfig);
        map.flytochina();
        var viewer = map.getViewer();
        _Entity = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(122, 40, 1500000),
            point: {
                show: true, //是否展示
                pixelSize: 4, //点的大小
                color: Cesium.Color.YELLOW, //颜色
                outline: true,
                outlineWidth: 1,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            comsatScan: new Cesium.ComsatScanGraphics({
                angle: 20,
                show: this.show,
                color: new Cesium.Color(100, 0, 255, 0.4),
            }),
            polyline: {
                positions: [],
                material: new Cesium.Color(1, 0, 0, 1),  // 线的颜色
                width: 1, // 宽度
            }
        });
    },
    methods: {
        getCoverage() {
            var _arr = _Entity.comsatScan.getValue();
            _Entity.polyline.positions = _arr;
        },
        rgba2Color(value) {
            const regex = /(?<=\().+?(?=\))/g; // [] 中括号    
            var _value = value.match(regex)[0].split(',');
            return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
        },
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.MapView {
    width: 100%;
    height: 100%;
}

.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>